Add Statistic and Statistics components

[levithomason]

From here: http://semantic-ui.com/views/statistic.html

Our doc site rendering with code example:

[levithomason]

A single basic example, just to prove the component. Extended examples can be added on a separate PR.

[kyleturco]

Do we need the <div> here?

[levithomason]

We have spec'd to restructure to sub-components as static properties on the parent component, see #99. Up until now this has only included component parts, or elements internal to the component. For instance, a <Menu.Item /> for a <Menu />.

This PR proposes (shown on ln 3) that we also include the plural "group" element as a sub-component.

Pros:

• Only a single property (parent component) needs to be exposed in the Stardust module.
• Only a single import is required to use the full spectrum of markup for a given component. Opposed to importing the component and it's plural name for groups, as it is currently.
• I think it is the proper cohesion as you should never use <Items /> unless you are also using <Item />.

Cons:

• The naming is a little odd and ugly (note I destructured the sub-components above). This is especially true with longer component names and without destructuring:

  <Statistic.Statistics>
  <Statistic>
    <Statistic.Value>22</Statistic.Value>
    <Statistic.Label>Faves</Statistic.Label>
  </Statistic>
  <Statistic>
    <Statistic.Value>31,200</Statistic.Value>
    <Statistic.Label>Views</Statistic.Label>
  </Statistic>
  </Statistic.Statistics>

Ideas:

• We could use the sub-component name Group for the plural names. It would give us a standard across all components and slightly clearer syntax (below). However, it does break the alignment with JS class names and HTML class names (className='statistics' and class Group extends Component {...). Also, we'd further obfuscate parity with Semantic UI.

  <Statistic.Group>
  <Statistic>
    <Statistic.Value>22</Statistic.Value>
    <Statistic.Label>Faves</Statistic.Label>
  </Statistic>
  <Statistic>
    <Statistic.Value>31,200</Statistic.Value>
    <Statistic.Label>Views</Statistic.Label>
  </Statistic>
  </Statistic.Group>

Feedback?

[levithomason]

Had to repost this comment as it became outdated due a new push.

---

We have spec'd to restructure to sub-components as static properties on the parent component, see #99. Up until now this has only included component parts, or elements internal to the component. For instance, a <Menu.Item /> for a <Menu />.

This PR proposes (shown on ln 3) that we also include the plural "group" element as a sub-component.

Pros:

• Only a single property (parent component) needs to be exposed in the Stardust module.
• Only a single import is required to use the full spectrum of markup for a given component. Opposed to importing the component and it's plural name for groups, as it is currently.
• I think it is the proper cohesion as you should never use <Items /> unless you are also using <Item />.

Cons:

• The naming is a little odd and ugly (note I destructured the sub-components above). This is especially true with longer component names and without destructuring:

  <Statistic.Statistics>
  <Statistic>
    <Statistic.Value>22</Statistic.Value>
    <Statistic.Label>Faves</Statistic.Label>
  </Statistic>
  <Statistic>
    <Statistic.Value>31,200</Statistic.Value>
    <Statistic.Label>Views</Statistic.Label>
  </Statistic>
  </Statistic.Statistics>

Ideas:

• We could use the sub-component name Group for the plural names. It would give us a standard across all components and slightly clearer syntax (below). However, it does break the alignment with JS class names and HTML class names (className='statistics' and class Group extends Component {...). Also, we'd further obfuscate parity with Semantic UI.

  <Statistic.Group>
  <Statistic>
    <Statistic.Value>22</Statistic.Value>
    <Statistic.Label>Faves</Statistic.Label>
  </Statistic>
  <Statistic>
    <Statistic.Value>31,200</Statistic.Value>
    <Statistic.Label>Views</Statistic.Label>
  </Statistic>
  </Statistic.Group>

Feedback?

[athurman]

Would this change the syntax for all components that have sub-components? Or just those that need to have "groups" for styling?

I could see using the Group sub-component name with Statistics and Segments but how would this look for other components such as Menu and List?

I have seen benefits in developing with aligning JS class names and HTML class names while developing with Stardust components, in that I could easily look through the semantic ui docs and make accurate guesses on how the component is named, but I do agree <Statistic.Statistics> does not feel as intuitive as <Statistic.Group>

[levithomason]

This would only affect the group sub-component. I think for now then we'll keep parity with the class names, sd-statistic-statistics inside <Statistic.Group /> and also, the Semantic UI doc site. If we feel otherwise later we can refactor.

[kyleturco]

This is a bit overwhelming to look at. I think I would rather see <Statistic value="22" label="Faves" /> but I realize the .Value, etc provides good options

[levithomason]

The issue there was, the label can be on top or on bottom. So we had to either make a topLabel and bottomLabel prop (and probably a label prop that defaulted to top). Or, go our sub-component approach. Knowing this, is your preference the same?

[kyleturco]

What's the urgency on this one? I can try to build out the rest of the examples tomorrow to include in this PR

[athurman]

🌊 🐙