@bloom-housing/ui-components 6.0.0 → 6.0.1-alpha.1

package/src/page_components/listing/ListingCard.scss

@@ -86,3 +86,7 @@
     margin-inline-start: var(--bloom-s1);
   }
 }
+.listings-pill_header {
+  margin-bottom: var(--bloom-s3);
+  margin-top: var(--bloom-s1);
+}

package/src/page_components/listing/ListingCard.tsx

@@ -5,7 +5,7 @@ import { StackedTable, StackedTableProps } from "../../tables/StackedTable"
 import { StandardTable, StandardTableProps } from "../../tables/StandardTable"
 import { Heading, HeaderType } from "../../headers/Heading"
 import { Tag } from "../../text/Tag"
-import { AppearanceStyleType } from "../../global/AppearanceTypes"
+import { AppearanceShadeType, AppearanceStyleType } from "../../global/AppearanceTypes"
 import { Icon, IconFillColors } from "../../icons/Icon"
 import "./ListingCard.scss"
 import { NavigationContext } from "../../config/NavigationContext"
@@ -16,6 +16,8 @@ export interface CardHeader {
   content: string | React.ReactNode
   href?: string
   customClass?: string
+  styleType?: AppearanceStyleType
+  isPillType?: boolean
 }
 
 export interface FooterButton {
@@ -74,12 +76,25 @@ const ListingCard = (props: ListingCardProps) => {
   const getHeader = (
     header: CardHeader | undefined,
     priority: number,
-    style?: HeaderType,
+    styleType?: HeaderType,
     customClass?: string
   ) => {
     if (header && header.content) {
+      if (header.isPillType) {
+        return (
+          <Tag
+            className="listings-pill_header"
+            pillStyle
+            capitalized
+            styleType={header.styleType}
+            shade={AppearanceShadeType.light}
+          >
+            {header.content}
+          </Tag>
+        )
+      }
       return (
-        <Heading priority={priority} style={style} className={customClass}>
+        <Heading priority={priority} style={styleType} className={customClass}>
           {header.href ? (
             <LinkComponent className="is-card-link" href={header.href}>
               {header.content}

package/src/page_components/listing/listing_sidebar/Contact.tsx

@@ -95,12 +95,12 @@ const Contact = ({
 
       {additionalInformation?.map((info) => {
         return (
-          <React.Fragment key={info.title}>
+          <div key={info.title} className={"my-3"}>
             <Heading priority={3} style={"sidebarSubHeader"}>
               {info.title}
             </Heading>
             <div className="text-gray-800 text-tiny markdown">{info.content}</div>
-          </React.Fragment>
+          </div>
         )
       })}
     </section>

package/src/page_components/listing/listing_sidebar/GetApplication.tsx

@@ -1,13 +1,13 @@
 import React, { useState } from "react"
-import { t } from "../../../helpers/translator"
+import Markdown from "markdown-to-jsx"
 import { Button } from "../../../actions/Button"
 import { LinkButton } from "../../../actions/LinkButton"
 import { AppearanceStyleType } from "../../../global/AppearanceTypes"
 import { Address } from "../../../helpers/MultiLineAddress"
-import { ContactAddress } from "./ContactAddress"
-import { OrDivider } from "./OrDivider"
 import { Heading } from "../../../headers/Heading"
-import Markdown from "markdown-to-jsx"
+import { t } from "../../../helpers/translator"
+import { OrDivider } from "./OrDivider"
+import { ContactAddress } from "./ContactAddress"
 
 export interface PaperApplication {
   fileURL: string
@@ -33,6 +33,16 @@ export interface ApplicationsProps {
   postmarkedApplicationsReceivedByDate?: string
   /** Whether or not to hide actionable application buttons */
   preview?: boolean
+  strings?: {
+    applicationsOpenInFuture?: string
+    applyOnline?: string
+    downloadApplication?: string
+    getAPaperApplication?: string
+    getDirections?: string
+    howToApply?: string
+    officeHoursHeading?: string
+    pickUpApplication?: string
+  }
 }
 /** Displays information regarding how to apply, including an online application link button, paper application downloads, and a paper application pickup address */
 const GetApplication = (props: ApplicationsProps) => {
@@ -46,19 +56,22 @@ const GetApplication = (props: ApplicationsProps) => {
 
   return (
     <section className="aside-block" data-test-id="get-application-section">
-      <h2 className="text-caps-underline">{t("listings.apply.howToApply")}</h2>
+      <h2 className="text-caps-underline">
+        {props.strings?.howToApply ?? t("listings.apply.howToApply")}
+      </h2>
       {!props.applicationsOpen && (
         <p className="mb-5 text-gray-700">
-          {t("listings.apply.applicationWillBeAvailableOn", {
-            openDate: props.applicationsOpenDate,
-          })}
+          {props.strings?.applicationsOpenInFuture ??
+            t("listings.apply.applicationWillBeAvailableOn", {
+              openDate: props.applicationsOpenDate,
+            })}
         </p>
       )}
       {props.applicationsOpen && props.onlineApplicationURL && (
         <>
           {props.preview ? (
             <Button disabled className="w-full mb-2" data-test-id={"listing-view-apply-button"}>
-              {t("listings.apply.applyOnline")}
+              {props.strings?.applyOnline ?? t("listings.apply.applyOnline")}
             </Button>
           ) : (
             <LinkButton
@@ -67,7 +80,7 @@ const GetApplication = (props: ApplicationsProps) => {
               href={props.onlineApplicationURL}
               dataTestId={"listing-view-apply-button"}
             >
-              {t("listings.apply.applyOnline")}
+              {props.strings?.applyOnline ?? t("listings.apply.applyOnline")}
             </LinkButton>
           )}
         </>
@@ -76,7 +89,9 @@ const GetApplication = (props: ApplicationsProps) => {
       {props.applicationsOpen && props.paperMethod && !!props.paperApplications?.length && (
         <>
           {props.onlineApplicationURL && <OrDivider bgColor="white" />}
-          <div className="text-serif-lg">{t("listings.apply.getAPaperApplication")}</div>
+          <div className="text-serif-lg">
+            {props.strings?.getAPaperApplication ?? t("listings.apply.getAPaperApplication")}
+          </div>
           <Button
             styleType={
               !props.preview && props.onlineApplicationURL ? AppearanceStyleType.primary : undefined
@@ -85,7 +100,7 @@ const GetApplication = (props: ApplicationsProps) => {
             onClick={toggleDownload}
             disabled={props.preview}
           >
-            {t("listings.apply.downloadApplication")}
+            {props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
           </Button>
         </>
       )}
@@ -94,7 +109,7 @@ const GetApplication = (props: ApplicationsProps) => {
           <p key={index} className="text-center mt-2 mb-4 text-sm">
             <a
               href={paperApplication.fileURL}
-              title={t("listings.apply.downloadApplication")}
+              title={props.strings?.downloadApplication ?? t("listings.apply.downloadApplication")}
               target="_blank"
             >
               {paperApplication.languageString}
@@ -107,16 +122,16 @@ const GetApplication = (props: ApplicationsProps) => {
             <OrDivider bgColor="white" />
           )}
           <Heading priority={3} style={"sidebarSubHeader"}>
-            {t("listings.apply.pickUpAnApplication")}
+            {props.strings?.pickUpApplication ?? t("listings.apply.pickUpAnApplication")}
           </Heading>
           <ContactAddress
             address={props.applicationPickUpAddress}
-            mapString={t("t.getDirections")}
+            mapString={props.strings?.getDirections ?? t("t.getDirections")}
           />
           {props.applicationPickUpAddressOfficeHours && (
             <>
               <Heading priority={3} style={"sidebarSubHeader"}>
-                {t("leasingAgent.officeHours")}
+                {props.strings?.officeHoursHeading ?? t("leasingAgent.officeHours")}
               </Heading>
               <p className="text-gray-800 text-tiny markdown">
                 <Markdown

package/src/page_components/listing/listing_sidebar/ListingUpdated.tsx

@@ -4,6 +4,9 @@ import dayjs from "dayjs"
 
 interface ListingUpdatedProps {
   listingUpdated: Date
+  strings?: {
+    listingUpdated?: string
+  }
 }
 
 const ListingUpdated = (props: ListingUpdatedProps) => {
@@ -11,7 +14,8 @@ const ListingUpdated = (props: ListingUpdatedProps) => {
   return (
     <section className="aside-block">
       <p className="text-tiny text-gray-800">
-        {`${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
+        {props?.strings?.listingUpdated ??
+          `${t("listings.listingUpdated")}: ${dayjs(listingUpdated).format("MMMM DD, YYYY")}`}
       </p>
     </section>
   )

package/src/page_components/listing/listing_sidebar/OrDivider.tsx

@@ -1,9 +1,11 @@
 import * as React from "react"
 import { t } from "../../../helpers/translator"
 
-const OrDivider = (props: { bgColor: string }) => (
+const OrDivider = (props: { bgColor: string; strings?: { orString?: string } }) => (
   <div className="aside-block__divider">
-    <span className={`bg-${props.bgColor} aside-block__conjunction`}>{t("t.or")}</span>
+    <span className={`bg-${props.bgColor} aside-block__conjunction`}>
+      {props.strings?.orString ?? t("t.or")}
+    </span>
   </div>
 )
 

package/src/page_components/listing/listing_sidebar/ReferralApplication.tsx

@@ -5,7 +5,10 @@ import { Icon, IconFillColors } from "../../../icons/Icon"
 interface ReferralApplicationProps {
   description: string
   phoneNumber: string
-  title: string
+  strings: {
+    call?: string
+    title: string
+  }
 }
 
 const ReferralApplication = (props: ReferralApplicationProps) => {
@@ -13,11 +16,11 @@ const ReferralApplication = (props: ReferralApplicationProps) => {
 
   return (
     <section className="aside-block">
-      <h2 className="text-caps-underline">{props.title}</h2>
+      <h2 className="text-caps-underline">{props.strings.title}</h2>
       <p>
         <a href={linkedPhoneNumber}>
-          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} /> {t("t.call")}{" "}
-          {props.phoneNumber}
+          <Icon symbol="phone" size="medium" fill={IconFillColors.primary} />{" "}
+          {props.strings.call ?? t("t.call")} {props.phoneNumber}
         </a>
       </p>
       <p className="text-tiny mt-4 text-gray-800">{props.description}</p>

package/src/page_components/listing/listing_sidebar/events/DownloadLotteryResults.tsx

@@ -5,13 +5,18 @@ type DownloadLotteryResultsProps = {
   resultsDate?: string
   buttonText?: string
   pdfURL?: string
+  strings?: {
+    sectionHeader?: string
+  }
 }
 
 const DownloadLotteryResults = (props: DownloadLotteryResultsProps) => {
   if (!props.pdfURL) return null
   return (
     <section className="aside-block text-center">
-      <h2 className="text-caps pb-4">{t("listings.lotteryResults.header")}</h2>
+      <h2 className="text-caps pb-4">
+        {props.strings?.sectionHeader ?? t("listings.lotteryResults.header")}
+      </h2>
       {props.resultsDate && (
         <p className="uppercase text-gray-800 text-tiny font-semibold pb-4">{props.resultsDate}</p>
       )}

package/src/page_components/sign-in/FormSignIn.tsx

@@ -66,7 +66,7 @@ const FormSignIn = ({
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" />
-        <h2 className="form-card__title">{t(`nav.signIn`)}</h2>
+        <h1 className="form-card__title">{t(`nav.signIn`)}</h1>
       </div>
       <FormSignInErrorBox
         errors={errors}

package/src/page_components/sign-in/FormSignInErrorBox.tsx

@@ -27,7 +27,7 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
         <ErrorMessage
           id={`form-sign-in-${errorMessageId}-error`}
           error={!!networkStatus.content}
-          className="block mt-0 leading-normal text-red-700"
+          className="block mt-0 leading-normal text-alert"
         >
           <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
             {networkStatus.content.title}

package/src/sections/InfoCardGrid.scss

@@ -1,5 +1,5 @@
 .info-cards__header {
-  @apply mb-3;
+  @apply my-3;
 
   @screen md {
     margin-right: 1rem;

package/src/sections/InfoCardGrid.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+import { Heading } from "../headers/Heading"
 import "./InfoCardGrid.scss"
 
 export interface InfoCardGridProps {
@@ -10,7 +11,9 @@ export interface InfoCardGridProps {
 const InfoCardGrid = (props: InfoCardGridProps) => (
   <section className="info-cards">
     <header className="info-cards__header">
-      <h2 className="info-cards__title">{props.title}</h2>
+      <Heading style={"sidebarHeader"} priority={2} className={"text-tiny"}>
+        {props.title}
+      </Heading>
       {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}
     </header>
     <div className="info-cards__grid">{props.children}</div>

package/src/sections/ListSection.tsx

@@ -11,7 +11,7 @@ const ListSection = (props: ListSectionProps) => (
   <li className="list-section custom-counter__item">
     <header className="list-section__header custom-counter__header">
       <hgroup>
-        <h4 className="custom-counter__title">{props.title}</h4>
+        <h3 className="custom-counter__title">{props.title}</h3>
         <span className="custom-counter__subtitle">{props.subtitle}</span>
       </hgroup>
     </header>

package/src/tables/AgTable.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useCallback, useEffect, useRef } from "react"
 import { useForm } from "react-hook-form"
 import { AgGridReact } from "ag-grid-react"
-import { GridOptions, ColumnState, ColumnApi, ColDef, ColGroupDef } from "ag-grid-community"
+import {
+  GridOptions,
+  ColumnState,
+  ColumnApi,
+  ColDef,
+  ColGroupDef,
+  GridApi,
+} from "ag-grid-community"
 import { AgPagination, AG_PER_PAGE_OPTIONS } from "./AgPagination"
 import { LoadingOverlay } from "../overlays/LoadingOverlay"
 import { Field } from "../forms/Field"
@@ -15,14 +22,19 @@ export interface ColumnOrder {
 }
 
 export interface AgTableProps {
-  id: string
   config: AgTableConfig
   data: AgTableData
-  pagination: AgTablePagination
+  id: string
+  pagination?: AgTablePagination
   search: AgTableSearch
+  selectConfig?: AgTableSelectConfig
   sort?: AgTableSort
   headerContent?: React.ReactNode
   className?: string
+  strings?: {
+    filter?: string
+    searchError?: string
+  }
 }
 
 export interface AgTablePagination {
@@ -32,11 +44,17 @@ export interface AgTablePagination {
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>
 }
 
+export interface AgTableSelectConfig {
+  setGridApi: React.Dispatch<React.SetStateAction<GridApi | null>>
+  updateSelectedValues: () => void
+}
+
 export interface AgTableConfig {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   gridComponents?: { [p: string]: any }
   columns: (ColDef | ColGroupDef)[]
   totalItemsLabel: string
+  rowSelection?: boolean
 }
 
 export interface AgTableData {
@@ -49,6 +67,7 @@ export interface AgTableData {
 
 export interface AgTableSearch {
   setSearch: React.Dispatch<React.SetStateAction<string>>
+  showSearch?: boolean
 }
 
 export interface AgTableSort {
@@ -81,20 +100,21 @@ export const useAgTable = () => {
 }
 
 const AgTable = ({
-  id,
   className,
+  config: { gridComponents, columns, totalItemsLabel, rowSelection },
+  data,
+  headerContent,
+  id,
+  selectConfig,
   pagination,
-  search: { setSearch },
+  search: { setSearch, showSearch = true },
   sort: { setSort } = {},
-  headerContent,
-  data,
-  config: { gridComponents, columns, totalItemsLabel },
+  strings,
 }: AgTableProps) => {
   // local storage key with column state
   const columnStateLsKey = `column-state_${id}`
   const defaultColDef = {
     resizable: true,
-    maxWidth: 300,
   }
 
   const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null)
@@ -144,7 +164,7 @@ const AgTable = ({
   const debounceFilter = useRef(
     debounce((value: string) => {
       setSearch(value)
-      pagination.setCurrentPage(1)
+      pagination?.setCurrentPage(1)
     }, 500)
   )
   useEffect(() => {
@@ -180,33 +200,37 @@ const AgTable = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onGridReady = (params: any) => {
     setGridColumnApi(params.columnApi)
+    if (selectConfig?.setGridApi) {
+      selectConfig.setGridApi(params.api)
+    }
   }
 
   return (
     <div className={`ag-theme-alpine ag-theme-bloom ${className || ""}`}>
       <div className="flex justify-between flex-col md:flex-row">
-        <div className="flex flex-wrap">
+        <div className={`flex flex-wrap ${showSearch ? "mb-5" : "hidden"}`}>
           <div className="md:mr-5 w-full md:w-56">
             <Field
               dataTestId="ag-search-input"
               name="filter-input"
-              label={t("t.filter")}
+              label={strings?.filter ?? t("t.filter")}
               readerOnly={true}
               register={register}
-              placeholder={t("t.filter")}
+              placeholder={strings?.filter ?? t("t.filter")}
             />
           </div>
-          <div className="w-full md:w-auto mt-2 mb-2 md:mb-0">
+          <div className="w-full md:w-auto mt-2 md:mt-0 mb-2 md:mb-0">
             {!validSearch && (
-              <AlertBox type="notice">{t("applications.table.searchError")}</AlertBox>
+              <AlertBox type="notice">
+                {strings?.searchError ?? t("applications.table.searchError")}
+              </AlertBox>
             )}
           </div>
         </div>
 
         {headerContent}
       </div>
-
-      <div className="applications-table mt-5">
+      <div className="applications-table">
         <LoadingOverlay isLoading={data.loading}>
           <div>
             <AgGridReact
@@ -221,19 +245,25 @@ const AgTable = ({
               suppressPaginationPanel={true}
               paginationPageSize={AG_PER_PAGE_OPTIONS[0]}
               suppressScrollOnNewData={true}
+              rowSelection={rowSelection ? "multiple" : undefined}
+              rowMultiSelectWithClick={rowSelection}
+              onRowDataChanged={selectConfig?.updateSelectedValues ?? undefined}
+              onFirstDataRendered={selectConfig?.updateSelectedValues ?? undefined}
             ></AgGridReact>
           </div>
         </LoadingOverlay>
 
-        <AgPagination
-          totalItems={data.totalItems}
-          totalPages={data.totalPages}
-          currentPage={pagination.currentPage}
-          itemsPerPage={pagination.perPage}
-          quantityLabel={totalItemsLabel}
-          setCurrentPage={pagination.setCurrentPage}
-          setItemsPerPage={pagination.setPerPage}
-        />
+        {pagination && (
+          <AgPagination
+            totalItems={data.totalItems}
+            totalPages={data.totalPages}
+            currentPage={pagination.currentPage}
+            itemsPerPage={pagination.perPage}
+            quantityLabel={totalItemsLabel}
+            setCurrentPage={pagination.setCurrentPage}
+            setItemsPerPage={pagination.setPerPage}
+          />
+        )}
       </div>
     </div>
   )

package/src/tables/StandardTable.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from "react"
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd"
 import { nanoid } from "nanoid"
+import { faGripLines } from "@fortawesome/free-solid-svg-icons"
 import { getTranslationWithArguments } from "../helpers/getTranslationWithArguments"
 import { Icon, IconFillColors } from "../icons/Icon"
 import { t } from "../helpers/translator"
-import { faGripLines } from "@fortawesome/free-solid-svg-icons"
 
 export interface TableHeadersOptions {
   name: string
@@ -51,6 +51,8 @@ export type StandardTableCell = {
   content: React.ReactNode
   /** Text content that will replace this cell's header on mobile views */
   mobileReplacement?: string
+  /** Classname to apply to this row */
+  rowClass?: string
 }
 
 export type StandardTableData = Record<string, StandardTableCell>[]
@@ -74,6 +76,10 @@ export interface StandardTableProps {
   translateData?: boolean
   /** An id applied to the table */
   id?: string
+  strings?: {
+    orderString?: string
+    sortString?: string
+  }
 }
 
 const headerName = (header: string | TableHeadersOptions) => {
@@ -110,12 +116,16 @@ export const StandardTable = (props: StandardTableProps) => {
   }, [props.data])
 
   if (props.draggable) {
-    headerLabels.splice(0, 0, <th key={"header-draggable"}>{t("t.order")}</th>)
     headerLabels.splice(
       0,
       0,
-      <th key={"header-draggable"} className={"table__draggable-cell pl-5"}>
-        {t("t.sort")}
+      <th key={"header-draggable-order"}>{props.strings?.orderString ?? t("t.order")}</th>
+    )
+    headerLabels.splice(
+      0,
+      0,
+      <th key={"header-draggable-sort"} className={"table__draggable-cell pl-5"}>
+        {props.strings?.sortString ?? t("t.sort")}
       </th>
     )
   }
@@ -127,9 +137,11 @@ export const StandardTable = (props: StandardTableProps) => {
       ? `standardrow-${dataIndex}`
       : nanoid()
 
+    let rowClass: string | undefined = ""
     const cols = Object.keys(headers)?.map((colKey, colIndex) => {
       const uniqKey = process.env.NODE_ENV === "test" ? `standardcol-${colIndex}` : nanoid()
       const cell = row[colKey]?.content
+      rowClass = row[colKey]?.rowClass ? row[colKey].rowClass : ""
 
       const cellClass = [headerClassName(headers[colKey]), cellClassName].join(" ")
 
@@ -156,7 +168,7 @@ export const StandardTable = (props: StandardTableProps) => {
         0,
         <Cell
           key={`${dataIndex}-order-draggable`}
-          headerLabel={t("t.sort")}
+          headerLabel={props.strings?.sortString ?? t("t.sort")}
           className={`pl-5 ${cellClassName ?? undefined}`}
         >
           {dataIndex + 1}
@@ -167,7 +179,7 @@ export const StandardTable = (props: StandardTableProps) => {
         0,
         <Cell
           key={`${dataIndex}-sort-draggable`}
-          headerLabel={t("t.sort")}
+          headerLabel={props.strings?.sortString ?? t("t.sort")}
           className={`table__draggable-cell pl-7`}
         >
           <Icon symbol={faGripLines} size={"medium"} fill={IconFillColors.primary} />
@@ -193,7 +205,7 @@ export const StandardTable = (props: StandardTableProps) => {
             )}
           </Draggable>
         ) : (
-          <tr id={rowKey} key={rowKey}>
+          <tr id={rowKey} key={rowKey} className={rowClass ? rowClass : ""}>
             {cols}
           </tr>
         )}

package/src/text/Tag.scss

@@ -11,6 +11,8 @@
   --pill-font-weight: 600;
   --pill-text-transform: uppercase;
   --pill-letter-spacing: var(--bloom-letter-spacing-ultrawide);
+  --pill-capitalized-text-transform: capitalized;
+  --pill-capitalized-letter-spacing: var(--bloom-letter-spacing-wide);
 
   --small-pill-padding: var(--bloom-s1) var(--bloom-s3);
   --small-pill-font-size: var(--bloom-font-size-2xs);
@@ -129,4 +131,9 @@
     padding-block: var(--bloom-s2);
     padding-inline: var(--bloom-s4);
   }
+
+  &.is-capitalized {
+    text-transform: var(--pill-capitalized-text-transform);
+    letter-spacing: var(--pill-capitalized-letter-spacing);
+  }
 }

package/src/text/Tag.tsx

@@ -5,6 +5,7 @@ import "./Tag.scss"
 export interface TagProps extends AppearanceProps {
   className?: string
   pillStyle?: boolean
+  capitalized?: boolean
   children: React.ReactNode
   fillContainer?: boolean
 }
@@ -14,6 +15,7 @@ export const Tag = (props: TagProps) => {
 
   if (props.pillStyle) tagClasses.push("is-pill")
   if (props.fillContainer) tagClasses.push("fill-container")
+  if (props.capitalized) tagClasses.push("is-capitalized")
   if (props.className) tagClasses.push(props.className)
 
   return <span className={tagClasses.join(" ")}>{props.children}</span>