search

punchcard-cms / punchcard

The Punchcard CMS
Apache License 2.0
31 stars 19 forks source link

Core Developer: Base style guide routing #613

Open ineedsubstance opened 7 years ago

ineedsubstance commented 7 years ago

Style Guide Routing 

Feature: Style Guide Data
  As a core developer
  I want to have data from the style guide rendered
  So that I can apply Punchcard styling

  Scenario: Data for Color Swatches
    Given that, I need data to render the color section of the style guide
     When I navigate to that section
      Then I will see a short description describing the color palette we are using
      And I will see swatches that are the core colors making up the color palette for Punchcard
      And I will see all the available shades of blue
      And I will see all the available shades of purple
      And I will see all the available shades of grey and black and white
      And I will see the name of each color
      And I will see the hex value of each color
      And I will see all the RGB value of each color

  Scenario: Data for Typography
    Given that, I need data to render the typography section of the style guide
     When I navigate to that section
     Then I should include the text "Heading 1" for h1
      And I should include the text "Heading 2" for h2
      And I should include the text "Heading 3" for h3
      And I should include the text "Heading 4" for h4
      And I should include the text "Heading 5" for h5
      And I should include the text "Heading 6" for h6
      And I should include a paragraph of text of 3 sentences
      And I should include two paragraphs of text for the blockquote
      And I should include an author's name for the author text
      And the link should link to anywhere
      And I should include a short title for the first title of the definition list title
      And I should include a paragraph of text for the first definition list definition
      And I should include a longer title for the second definition list title
      And I should include an unordered list of 3 short items for the second definition list definition
      And I should include 3 short list items for the unordered list
      And I should include 3 short list items for the ordered list

Scenario: Data for Table
    Given that, I need data to render the table section of the style guide
     When I navigate to that section
      Then I should include a table
      And that table will have 5 columns
      And that table will have a row of table headers
      And those table headers all 5 with varying size content
      And that table will have 4 rows
      And each cell within those rows will have varying sizes of content

Scenario: Data for Code
    Given that, I need data to render the code section of the style guide
     When I navigate to that section
      Then I should include a few words in the keyboard input
      And I should include a few words for inline code
      And I should include a short sentence for sample input
      And I should include a grid of characters for pre-formatted text

Scenario: Data for Inline Elements
    Given that, I need data to render the inline elements section of the style guide
     When I navigate to that section
      Then I should include a few words for a rendered text link
      And I should include a short sentence for strong text
      And I should include a short sentence for emphasized text
      And I should include a short sentence for bolded but only a few words are bolded
      And I should include a short sentence for italicized but only a few words are italicized
      And I should include a short sentence for underline but only a few words are underlined
      And I should include a short sentence for deleted but only a few words are deleted
      And I should include a short sentence for strikethrough
      And I should include a few words for superscript that include a superscripted R at the end
      And I should include the text "H20" with the "2" being subscripted
      And I should include a short sentence for small text
      And I should include a short sentence for abbreviation with one word being abbreviated
      And I should include a short sentence for a quotation
      And I should include a short sentence for a citation
      And I should include a short sentence for definition with a few words being defined
      And I should include a short sentence for mark with a few words being marked
      And I should include a short sentence for variable with a few words in the variable
      And I should include a short sentence for time with a few words in the time element

Scenario: Data for Form Elements - Input Fields
    Given that, I need data to render the input fields section of the style guide
     When I navigate to that group of form elements
      Then I should include a text legend labeled "Input fields"
      And I should include a text input field
      And it will have the placeholder text "Text input"
      And it should include a text label "Input field"
      And it should include a short sentence of text as a description below it
      And I should include a disabled input field
      And it will have the placeholder text "Text input"
      And it should include a text label "Disabled input"
      And it should include a short sentence of text as a description below it
      And I should include a password input field
      And it will have the placeholder text "Type your password"
      And it should include a text label "Password"
      And I should include a URL input field
      And it will have the placeholder text "http://yoursite.com"
      And it should include a text label "Web address"
      And I should include an email input field
      And it will have the placeholder text "name@email.com"
      And it should include a text label "Email address"
      And I should include a phone input field
      And it will have the placeholder text "(999) 999-9999"
      And it should include a text label `Phone number`
      And I should include a search input field
      And it will have the placeholder text "Enter search term"
      And it should include a text label `Search`
      And I should include a number input field
      And it will have the placeholder text "Enter a number"
      And it should include a text label `Number input`

Scenario: Data for Form Elements - Select Dropdown
    Given that, I need data to render the select fields section of the style guide
     When I navigate to that group of form elements
      Then I should include a text legend labeled `Select dropdown`
      And I should include a selection dropdown with 5 options
      And each option will be 2-3 words
      And that select should include a text label "Select"

Scenario: Data for Form Elements - Checkboxes
    Given that, I need data to render the checkboxes section of the style guide
     When I navigate to that group of form elements
      Then I should include a text legend labeled "Checkboxes"
      And I should include a checkbox group with 3 options
      And each option will be 2-3 words

Scenario: Data for Form Elements - Radio buttons
    Given that, I need data to render the radio buttons section of the style guide
     When I navigate to that group of form elements
      Then I should include a text legend labeled "Radio buttons"
      And I should include a radio button group with 3 options
      And each option will be 2-3 words

Scenario: Data for Form Elements - Textarea
    Given that, I need data to render the textarea section of the style guide
     When I navigate to that group of form elements
      Then I should include a text legend labeled "Textarea"
      And I should include a textarea
      And it will have 8 rows and 48 columns
      And it will have the placeholder text "Enter your message here"

Scenario: Data for Form Elements - HTML5 Inputs
    Given that, I need data to render the HTML5 inputs section of the style guide
     When I navigate to that group of form elements
      Then I should include a text legend labeled "HTML5 inputs"
      And I should include a color input
      And it should include a text label "Color input"
      And I should include a number input
      And it will have the value of "5"
      And it should include a text label "Number input"
      And I should include a range input
      And it should include a text label "Range input"
      And I should include a date input
      And it will have the value of "01/01/1970"
      And it should include a text label "Date input"
      And I should include a month input
      And it will have the value of "January 1970"
      And it should include a text label "Month input"
      And I should include a week input
      And it will have the value of "Week 01, 1970"
      And it should include a text label "Week input"
      And I should include a date/time input
      And it will have the value of "1970-01-01T00:00:00Z"
      And it should include a text label "Datetime input"
      And I should include a datetime-local input
      And it will have the value of "01/01/1970, 12:00AM"
      And it should include a text label "Datetime-local input"

Scenario: Data for Form Elements - Buttons
    Given that, I need data to render the buttons section of the style guide
     When I navigate to that group of form elements
      Then I should include a submit button
      And it should include the text "Button type = submit"
      And I should include a button button
      And it should include the text "Button type = button"
      And I should include a reset button
      And it should include the text "Button type = reset"
      And I should include a text link
      And it should include the text "Link type = cancel"

Scenario: Data for Styled Components
    Given I am on the style guide page
     When I am looking at the components section
      Then I will see a section containing the currently styled components
      And all these components will already have data associated with each of them

Scenario: Embedded SVG
    Given that I need data to render the embedded SVG section of the style guide
     When I navigate to that section of the style guide
     Then I will see a code block of the SVG code from the Conversation SVG pictogram
      And I will also see a visually rendered version of the conversation pictogram
      And the pictogram will be filled with purple 50
      And the background will be transparent

Style Guide Routing

ineedsubstance commented 7 years ago

@poofichu - copied this over from what you already did on WOX-UI. I did remove the table data section since we already have a separate component for that already here.

poofichu commented 7 years ago

@ineedsubstance 👌