TWE: Dev: Create Template Issue: Code [Replace with NAME OF COMPONENT] Component

[ExperimentsInHonesty]

Overview

We need to create a template issue for Code [Replace with NAME OF COMPONENT] Component so that we have a consistent, transparent, defined, and self-supporting structure for people creating them.

Action Items

Customize this issue

• Customize this issue by adding the Name of Issue Template.
  • Note: An issue template's name is different from the issue title created from the template.
  • [x] Search for [Replace NAME OF ISSUE TEMPLATE] by using the browser search (Mac: ⌘+F; PC: Ctrl+F)
  • [x] Replace the keyword string (including text and the brackets) below with the name of your issue template according to the template naming convention: TWE: Role: Direct object: Action verb
    • The role is the primary owner of the issue template (e.g., Research, Design, Product)
    • Direct object should be the item that we're updating or working on (e.g., Wiki, Interviews, Roadmap)
    • Action verb should be the main descriptor of the action items (e.g., Update, Create, Transcribe)

Customize the issue settings (located in right sidebar)

Change the issue settings to ensure the issue is properly categorized and easy to manage.

• [x] Under Assignees, assign yourself.
• [x] Under Projects, choose gear, choose Repository, and choose TWE Project Management.
• [x] Add the milestone: Project Management
• [x] Add a feature label specific to what the template is related to, if available. If not clear what you should use, ask product.

Customize template draft

Create a draft of new template, which will be known as our "draft".

• [x] Copy resource 1.01 Content to copy for draft to a new comment on this issue.
• [x] In your draft, fill out the top part (called front matter) with the following information. See resource 1.02 Front Matter Resources section below for definitions and examples.
  • [x] Name
  • [x] About
  • [x] Title
  • [x] Labels
• [x] Define any Dependencies (or remove the dependency section if there is no dependency)
• [x] Customize the Overview section
• [ ] Fill out the Action Items section (in your draft) by defining the steps that are required to be done, keeping the following in mind:
  • [ ] The person working on this issue might be new to the org, so the issue should be able to be worked on without any prior knowledge
  • [ ] If the person needs to add links, or put documents in specific locations, the place where they can do that action must be linked in the resources section
    • [ ] The links in the resources section provided by the issue creator should be in the same order as the Action Items
    • [ ] Refer to resource 1.03 Example Action Items for Finding Wiki Page and Template for an example of how to write clear instructions that avoid compound steps (steps within a step).
  • [ ] Number each resource in the order each resource appears in the Action Items
    • [ ] Group resources into numbers and decimals (e.g., Resource 1.01, Resource 2.01)
    • [ ] Group the resources based on whether they are available when making the issues or they need to be created from this issue
      • If the resource is available, then group it under the Resources for creating this issue section (e.g., Resource 1.01, Resource 1.02, Resource 1.03)
      • If the resource will be delivered or created from this issue, then group it under the Resource links gathered during the making of this issue section (e.g., Resource 2.01, Resource 2.02, Resource 2.03)
• [ ] If documents or folders (sheets, docs, presentations, dashboard, etc.) will be created, find the document template that should be used by checking resource 1.04 WIKI Templates by role pages.
  • [ ] If there is a template
    • [ ] Add a link to the template into the #### Resources for creating this issue section of your draft
  • [ ] If there is no template yet
  • [ ] Put a placeholder into the#### Resources for creating this issue section of the draft [TWE: Template Issue: [Role]: [Replace ACTION VERB][Replace DIRECT OBJECT]
• [ ] Get sign-off by Product on the draft
• [ ] Create the template issue on the repo if needed
• [ ] Add the link to the new issue template once created to resource 2.01. Find by clicking on the Get started button to the right of the new template listed on new issue page
• [ ] Update the appropriate place in the wiki for your template (see resources section)

Resources/Instructions

Resources for creating this issue

• 1.01 Content to copy for draft

  
  Draft of template issue for Dev: Code [Replace with NAME OF COMPONENT] Component
  ---
  **name:** TWE: Template Issue: [Replace ROLE]: [Replace ACTION VERB][Replace DIRECT OBJECT]
  **about:** This issue helps you structure your template issue to be consistent with our other template issues in [Replace DIRECT OBJECT]
  ** title:** TWE: [Replace ROLE]: [Replace DIRECT OBJECT]: [Replace ACTION VERB]
  **labels:** 'feature: board / google drive / tools, feature: missing, milestone: missing, role: missing, size: missing', 'Participant Type: missing', 'complexity: missing'
  **assignees:**

---

Instructions for creating this issue

The person who creates this issue should use these links to add links to the resources section and customize this issue

• Customize the issue
  • [ ] Copy and paste entire template text in this issue into text editor (ie., "TextEdit" on Mac, "Wordpad" on PC)
  • Use Find/Replace (Mac: ⌘+F or PC: Ctrl+F) to search for and replace the keyword strings (including text and the brackets) below with the appropriate values
  • [ ] Search for [Replace
  • [ ] Replace with whatever the keyword or information is asking for.
• Customize the issue settings (located in right sidebar)
  • [ ] Under Labels, add labels for any labels identified as missing
  • [ ] Remove the corresponding missing labels
  • [ ] Under Projects, choose gear, choose "Repository," and choose TWE Project Management.
  • [ ] Add the milestone: [Replace MILESTONE]
  • [ ] Add a feature label specific to what the template is related to, if available. If not clear what you should use, ask product.
• Customize dependencies
  • [ ] If no dependencies, delete dependency section
  • [ ] If dependencies, add the dependencies (any issue or reason that would prevent the action items from being completed)
• Remove this section.
  • [ ] Delete this section when all the checkboxes above are complete (i.e., the issue assignee will never see this part)

Dependencies

Overview

We need to [Replace ACTION VERB] [Replace DIRECT OBJECT] for [Replace REASON].

Action Items

A STEP BY STEP LIST OF ALL THE TASK ITEMS THAT YOU CAN THINK OF NOW EXAMPLES INCLUDE: Research, reporting, coding, etc.

Resources

Resources for creating this issue

1.01 1.02

Resources gathered during the completion of this issue

2.01 2.02

- 1.02 Front Matter Resources
   <details>
   <summary>Front Matter Fields and Meaning</summary>

   - name: (name that appear on the new issue tab)
   - about: (is the description that appears next to the issue template on the new issue tab)
   - title: (the title that appears when the issue is created.  User then customizes this title for their issue)
       - Use the naming convention: TWE: Role: Direct object: Action verb
       - If more than one word should go into the direct object spot, use multiple square brackets with the keyword (see example below)
   - labels: (choose the labels that will be the same each time, and choose missing labels for the ones that depend on content)
   - assignees:  
   </details>
   <details>
   <summary>Front Matter Field Example</summary>

   - name: 'TWE: Template Issue: Research: Create Roadmap'
   - about:  This issue helps you structure your template issue to be consistent with our other template issues in roadmap
   - title: 'TWE: Research: IS[Replace YY]: RP[Replace 000]: [Replace TYPE OF PARTICIPANT] [Replace TYPE OF RESEARCH METHOD]: Roadmap : Create'
   - labels: 'feature: research', 'feature: roadmap', 'milestone: missing', 'role: UI/UX research', 'Participant Type: missing', 'Research 000: missing', 'complexity: missing'
   - 'size: 0.50pt'
   - assignees: ''
   </details>

- 1.03 Example Action Items for Finding Wiki Page and Template
   <details>
   <summary>Example Action Items</summary>

Action Items

• Customize wiki page
  • [ ] Go to link 1.01 Internship Wiki, Join the team page
  • [ ] Find wiki page for this issue by looking at role pages.
  • [ ] Copy the link for the wiki page.
  • [ ] Add the link to Resource 2.01
    • [ ] Add the name of the link in square brackets
    • [ ] Add the URL in parenthesis without a space between the square bracket and parenthesis

• Customize document template.

  • [ ] Go to link 1.02 Design Process Overview
  • [ ] Find document template that should be used in this issue.
  • [ ] Copy the link for the template.
  • [ ] Add the link to Resource 2.02
    • [ ] Add the name of the link in square brackets
    • [ ] Add the URL in parenthesis without a space between the square bracket and parenthesis

  Example Resource Lists

  ``` ### Resources for creating this issue 1.01. [Internship Wiki, Join the team page](https://github.com/hackforla/internship/wiki/Joining-the-Team) 1.02. [Design Process Overview](https://github.com/hackforla/internship/wiki/Design-Process-Overview) ### Resource links gathered during the making of this issue 2.01. [Wiki page for [Replace TYPE OF ROLE]] 2.02. [TWE: Template: [Replace NAME OF TEMPLATE]] ```

• 1.04 WIKI Templates by role pages
  • TWE: WIKI: UX Research Guides Templates
  • Design
  • Product
  • [Business Analyst / Data Science]
  • [Software Engineer]
  • [Marketing]
  • default document templates, in case you don't have one yet, can be found on the Design Process Overview page

Resources gathered during the completion of this issue

• 2.01 [TWE: [Replace ROLE]: [Replace DIRECT OBJECT]: [Replace ACTION VERB]]([Replace LINK])

[ExperimentsInHonesty]

Draft of template issue for Dev: Create [Replace with NAME OF COMPONENT] Component

---

name: TWE: Template Issue: Dev: Create [Replace with NAME OF COMPONENT] Component about: This issue helps you structure your template issue to be consistent with our other template issues in Design System Component Creation title: TWE: Dev: Design System: Create [Replace with NAME OF COMPONENT] labels: 'feature: board / google drive / tools, feature: design system, milestone: missing, role: engineering, size: 1pt', 'Participant Type: TWE Team Member', 'complexity: medium' assignees:

---

Instructions for creating this issue

The person who creates this issue should use these links to add links to the resources section and customize this issue

• Customize the issue
  • [ ] Copy and paste entire template text in this issue into text editor (ie., "TextEdit" on Mac, "Wordpad" on PC)
  • Use Find/Replace (Mac: ⌘+F or PC: Ctrl+F) to search for and replace the keyword strings (including text and the brackets) below with the appropriate values
  • [ ] Search for [Replace with NAME OF COMPONENT]
    • [ ] Replace with the component name (removing the brackets in the process)
  • [ ] Search for [Replace with LINK TO DESIGN ISSUE FROM EPIC]
    • [ ] Replace with the design issue link from the epic comment in resource 1.09 (removing the brackets in the process)
• Customize the issue settings (located in right sidebar)
  • [ ] Add the milestone: 05.02.04 Development Build Microsite pages
    • [ ] Remove the corresponding missing label
  • [ ] Under Projects, choose gear, choose "Repository," and choose TWE Project Management.
• Customize dependencies
  • [ ] If the design issue is closed/released to dev, delete dependency section
  • [ ] If the design issue is open, add the issue link to Dependencies
  • [ ] Add any other issue or reason that would prevent the action items from being completed
• Remove this section.
  • [ ] Delete this section when all the checkboxes above are complete (i.e., the issue assignee will never see this part)

Dependencies

[Find the dependency from this table https://github.com/hackforla/internship/issues/455#issuecomment-2057437256 and replace this text with the link to the issue in a bullet]

Overview

We need to create Design System [Replace with NAME OF COMPONENT] Component HTML and SASS / connect Figma design to finished code, and build microsite page so that developers can see and easily change component examples, states, code and location.

Assumptions

• You have read the CONTRIBUTING.md in the Design System repo
  • You have set up your development environment for working with the Internship Design System Repository: https://github.com/hackforla/internship-website-design-system
  • You will continue to follow the instructions in CONTRIBUTING.md file

Action Items

• [ ] Review the Microsite page mockup you will be working from (Resource 1.01)
• [ ] Name the Branch you create [Replace with NAME OF COMPONENT]
• [ ] Determine if any JS or CSS hacks need to be included to style this component (see Resource 1.02 for examples of prior hacks). If you need to use a hack, don't forget to update the examples.
• [ ] Include necessary files in the /docs folder (Resource 1.03) and project config file mkdocs.yml (Resource 1.04)
• [ ] Determine what variables are needed for this component and add them to variables.scss (Resource 1.05)
• [ ] Code Microsite component page
  • file locations
    • [ ] md file goes into the /docs folder (Resource 1.03)
    • [ ] SASS file goes into the /docs/components/sass/components folder (Resource 1.06)
  • [ ] Create component classes and states within the page
  • [ ] Include Files via code snippets to create the code section (see Resource 1.07 for details)
• [ ] Review template frontend for errors
• [ ] Make a PR
• Once PR is merged
  • [ ] connect component in Figma to GitHub Files (Resource 1.08)
  • [ ] Add links to Resources gathered during the completion of this issue section
    • [ ] 2.01 MD file(s) created
    • [ ] 2.02 SASS file(s) created
    • [ ] 2.03 link to Header Microsite page on live site: If the site is live when this issue is worked on.

Resources

Resources for working on this issue

• 1.01 Design Reference
  • [Figma, [Replace with NAME OF COMPONENT] Microsite page]
  • Design Systems Figma
• 1.02 WIKI: Design system microsite JavaScript and sass hacks
• 1.03 MKdocs folder: /docs on repo
• 1.04 MDdocs config file: mkdocs.yml on repo
• 1.05 variables file: /docs/components/sass/abstracts/_variables.scss on repo
• 1.06 SASS file folder: /docs/components/sass/components
• 1.07 WIKI: How to Create a Design System Microsite Page using Snippets
• 1.08 Connect component in Figma to GitHub Files
• 1.09 Original Design Issue: [Replace with LINK TO DESIGN ISSUE FROM EPIC]
  • Microsite Epic Issue with list of design issues: #https://github.com/hackforla/internship/issues/455#issuecomment-2057437256

Resources gathered during the completion of this issue

• 2.01 MD file(s) created: [[Replace with NAME OF COMPONENT].md] - link the name to the file in the repo
• 2.02 SASS file(s) created: [[Replace with NAME OF COMPONENT].scss] - link the name to the file in the repo
• 2.03 link to Header Microsite page on live site: [Replace with NAME OF COMPONENT](Replace with - link to the live URL If the site is live when this issue is worked on.

[ExperimentsInHonesty]

Issue Template Dev: Create Design System Microsite Component